<template>
  <div class="sidebar">
    <div class="user-info">
      <el-avatar :size="50" class="avatar">{{ username.charAt(0) }}</el-avatar>
      <span class="username">{{ username }}</span>
    </div>
    <el-menu
      :default-active="activeMenu"
      class="menu"
      @select="handleMenuSelect"
    >
      <el-menu-item index="dataset">
        <el-icon><Document /></el-icon>
        <span>数据集</span>
      </el-menu-item>
      <el-menu-item index="test">
        <el-icon><Search /></el-icon>
        <span>检索测试</span>
      </el-menu-item>
      <el-menu-item index="settings">
        <el-icon><Setting /></el-icon>
        <span>配置</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Document,
  Search,
  Setting
} from '@element-plus/icons-vue'

const props = defineProps({
  username: {
    type: String,
    required: true
  }
})

const router = useRouter()
const route = useRoute()

// 根据路由路径映射到菜单项
const getMenuFromPath = (path) => {
  const pathSegments = path.split('/')
  const lastSegment = pathSegments[pathSegments.length - 1]
  return lastSegment || 'dataset'
}

// 根据菜单项映射到路由路径
const getPathFromMenu = (menu) => {
  const knowledgeId = route.params.id
  if (!knowledgeId) {
    return `/knowledge/dataset`
  }
  return `/knowledge/${knowledgeId}/${menu}`
}

const activeMenu = ref(getMenuFromPath(route.path))

// 监听路由变化
watch(() => route.path, (newPath) => {
  activeMenu.value = getMenuFromPath(newPath)
})

const handleMenuSelect = (index) => {
  router.push(getPathFromMenu(index))
}
</script>

<style scoped lang="scss">
.sidebar {
  width: 240px;
  border-right: 1px solid var(--el-border-color-light);
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);

  .user-info {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--el-border-color-light);

    .username {
      font-weight: 500;
    }
  }

  .menu {
    border-right: none;
  }
}
</style> 